<template>
  <l-layout :top="169" :topMove="false">
    <template #top>
      <div class="l-rblock pd-16">
        <div class="form_block">
          <div style="font-size: 16px; color: #333; font-weight: bold">
            {{ $t(formData.case_erp_purchase_f_Theme) }}
          </div>
          <div class="flex mt-16">
            <div>
              {{ $t("创建人：") }}
              {{ formData.case_erp_purchase_f_CreateUserName || "" }}
            </div>
            <div class="ml-16">
              {{ $t("创建时间：" + formData.case_erp_purchase_f_CreateDate) }}
            </div>
            <div class="ml-16">
              {{ $t("最后修改人：") }}
              {{ formData.case_erp_purchase_f_ModifyUserName || "" }}
            </div>
            <div class="ml-16">
              {{ $t("修改时间：" + formData.case_erp_purchase_f_ModifyDate) }}
            </div>
          </div>
          <div class="mt-16">
            <wf-audit-form
              v-if="id"
              ref="form"
              type="auditAndlook"
              :params="{ processId: id }"
              wraperType="btn"

               @refresh="wfRefresh"
            />
          </div>
        </div>
      </div>
    </template>
    <div class="l-rblock pd-16" style="padding-top: 0">
      <div class="l-auto-window form_block" style="padding: 0 16px">
        <el-tabs v-model="activeName">
          <el-tab-pane
            class="l-tabs-container learun-form-noborder"
            :label="$t('订单信息')"
            name="tab0"
          >
            <div class="learun-form-title mt-8">{{ $t("基础信息") }}</div>
            <div class="flex">
              <div style="width: 440px">
                <div>
                  {{
                    `${$t("采购单号")}：${formData.case_erp_purchase_f_Number}`
                  }}
                </div>
                <div class="mt-16">
                  {{
                    `${$t("采购日期")}：${
                      formData.case_erp_purchase_f_PurchaseDate
                    }`
                  }}
                </div>
                <div class="mt-16">
                  {{
                    `${$t("联系人")}：${
                      formData.case_erp_purchase_f_SupplierPerson
                    }`
                  }}
                </div>
                <div class="flex flex-center mt-16">
                  <div style="white-space: nowrap">{{ $t("采购部门") }}：</div>
                  <l-department-select
                    v-model="formData.case_erp_purchase_f_PurchaseDep"
                    disabled
                  />
                </div>
                <div class="mt-16">
                  {{
                    `${$t("联系电话")}：${
                      formData.case_erp_purchase_f_PurchasePhone
                    }`
                  }}
                </div>
                <div class="flex flex-center mt-16">
                  <div style="white-space: nowrap">{{ $t("结算方式") }}：</div>
                  <l-select
                    v-model="formData.case_erp_purchase_f_PayType"
                    disabled
                    :options="case_erp_purchase_f_PayTypeOptions"
                  />
                </div>
              </div>
              <div>
                <div>
                  {{
                    `${$t("订单主题")}：${formData.case_erp_purchase_f_Theme}`
                  }}
                </div>
                <div class="flex flex-center mt-16">
                  <div style="white-space: nowrap">
                    {{ $t("供应商名称") }}：
                  </div>
                  <l-select
                    v-model="formData.case_erp_purchase_f_SupplierName"
                    disabled
                    :options="case_erp_purchase_f_SupplierNameOptions"
                  />
                </div>
                <div class="mt-16">
                  {{
                    `${$t("联系方式")}：${
                      formData.case_erp_purchase_f_SupplierWay
                    }`
                  }}
                </div>
                <div class="flex flex-center mt-16">
                  <div style="white-space: nowrap">{{ $t("采购人员") }}：</div>
                  <l-user-select
                    v-model="formData.case_erp_purchase_f_PurchasePerson"
                    disabled
                  />
                </div>

                <div class="flex flex-center mt-16">
                  <div style="white-space: nowrap">{{ $t("关联项目") }}：</div>
                  <l-select
                    disabled
                    :options="case_erp_purchase_f_RelatedProjectOptions"
                    v-model="formData.case_erp_purchase_f_RelatedProject"
                  />
                </div>
              </div>
            </div>
            <div class="mt-16">
              {{
                `${$t("支付地址")}：${formData.case_erp_purchase_f_PayAddress}`
              }}
            </div>
            <div class="mt-16">
              {{ `${$t("备注")}：${formData.case_erp_purchase_f_Description}` }}
            </div>
            <div class="learun-form-title mt-16">
              {{ $t("产品明细") }}
            </div>
            <l-edit-table
              :isAddBtn="false"
              :isRead="true"
              ref="mainTable"
              :columns="case_erp_purchasedetail_columns"
              :dataSource="case_erp_purchasedetail_data"
              :summaryList="[
                { label: '总量', prop: 'f_Count', decimals: 0 },
                { label: '总金额', prop: 'f_AfterTaxAmount' },
              ]"
              showSummary2
            />
            <div v-if="fileCount > 0" class="learun-form-title mt-8">
              {{ $t("附件") }}<span>({{ fileCount }})</span>
            </div>
            <l-upload
              drag
              maxSize="10"
              sizeType="MB"
              :limit="3"
              showFileList="uploadTheme1"
              disabled
              v-model="formData.case_erp_purchase_f_File"
              @load="fileLoad"
              @success="fileLoad"
              @remove="fileLoad"
            />
          </el-tab-pane>
          <el-tab-pane name="tab1">
            <span slot="label">
              {{ $t("入库记录") }}
              <i
                v-if="formData.case_erp_purchase_f_InStoreState != 0"
                class="learun-icon-circle-sigh-base learun-error"
              />
              <i
                v-else
                class="learun-icon-circle-correct-base learun-success"
              />
            </span>
            <div class="l-rblock" style="padding: 16px 0">
              <warehousing-records
                :purchaseId="formData.case_erp_purchase_f_Id"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane name="tab2">
            <span slot="label">
              {{ $t("到票记录") }}
              <i
                v-if="formData.case_erp_purchase_f_TicketState != 0"
                class="learun-icon-circle-sigh-base learun-error"
              />
              <i
                v-else
                class="learun-icon-circle-correct-base learun-success"
              />
            </span>
            <div class="l-rblock" style="padding: 16px 0">
              <ticket-records :purchaseId="formData.case_erp_purchase_f_Id" />
            </div>
          </el-tab-pane>
          <!--<el-tab-pane class="l-tabs-container collection" name="tab3">
            <span slot="label">
              {{ $t("付款记录") }}
              <i
                v-if="formData.case_erp_purchase_f_PayState != 0"
                class="learun-icon-circle-sigh-base learun-error"
              />
              <i
                v-else
                class="learun-icon-circle-correct-base learun-success"
              />
            </span>
            <collection-form
              :id="this.formData.case_erp_purchase_f_Id"
              ref="collectionForm"
            />
          </el-tab-pane>-->
          <el-tab-pane :label="$t('流程记录')" name="tab4">
            <div class="l-rblock pd-16">
              <l-wf-audit-timeline v-if="id" isLoadData :processId="id" />
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('操作记录')" name="tab5">
            <operationRecords :materialId="formData.case_erp_purchase_f_Id" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </l-layout>
</template>
<script>
const api = window.$api.erpcase.purchase;
import WarehousingRecords from "./warehousingRecords";
import TicketRecords from "./ticketRecords";
import OperationRecords from "./operationRecords";

export default {
  props: {
    isReadOnly: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    WarehousingRecords,
    TicketRecords,
    OperationRecords,
  },
  data() {
    return {
      activeName: "tab0",
      formData: {
        case_erp_purchase_f_Number: "", // 采购单号
        case_erp_purchase_f_IsSysNum: 0, //
        case_erp_purchase_f_ApplyId: "", // 关联申请单
        case_erp_purchase_f_IsRelated: 0, //
        case_erp_purchase_f_Theme: "", // 订单主题
        case_erp_purchase_f_PurchaseDate: "", // 采购日期
        case_erp_purchase_f_SupplierName: "", // 供应商名称
        case_erp_purchase_f_SupplierPerson: "", // 联系人
        case_erp_purchase_f_SupplierWay: "", // 联系方式
        case_erp_purchase_f_PurchaseDep: "", // 采购部门
        case_erp_purchase_f_PurchasePerson: "", // 采购人员
        case_erp_purchase_f_PurchasePhone: "", // 联系电话
        case_erp_purchase_f_RelatedProject: "", // 关联项目
        case_erp_purchase_f_PayType: "", // 结算方式
        case_erp_purchase_f_PayAddress: "", // 支付地址
        case_erp_purchase_f_Description: "", // 备注
        case_erp_purchase_f_File: "", // 附件

        case_erp_purchase_f_CreateDate: "",
        case_erp_purchase_f_ModifyDate: "",
      },
      case_erp_purchasedetail_columns: [
        {
          id: "case_erp_purchasedetail_F_Number",
          prop: "f_Number",
          label: "物料编码",
          minWidth: 100,
        },
        {
          id: "case_erp_purchasedetail_F_Name",
          prop: "f_Name",
          label: "物料名称",
          minWidth: 140,
        },
        {
          id: "case_erp_purchasedetail_F_Model",
          prop: "f_Model",
          label: "规格型号",
          minWidth: 80,
        },
        {
          id: "case_erp_purchasedetail_F_Unit",
          prop: "f_Unit",
          label: "单位",
          minWidth: 64,
          align: "center",
          dataType: "dataSource",
          dataCode: "ERP_Unit",
          valueKey: "f_id",
          labelKey: "f_name",
        },
        {
          id: "case_erp_purchasedetail_F_Price",
          prop: "f_Price",
          label: "单价",
          minWidth: 80,
          required: true,
        },
        {
          id: "case_erp_purchasedetail_F_Count",
          prop: "f_Count",
          label: "数量",
          minWidth: 100,
          required: true,
        },
        {
          id: "case_erp_purchasedetail_F_Discount",
          prop: "f_Discount",
          label: "折扣",
          minWidth: 80,
          align: "center",
        },
        {
          id: "case_erp_purchasedetail_F_TaxRate",
          prop: "f_TaxRate",
          label: "税率",
          minWidth: 80,
          align: "center",
          required: true,
        },
        {
          id: "case_erp_purchasedetail_F_TaxBreak",
          prop: "f_TaxBreak",
          label: "税费",
          minWidth: 80,
          align: "center",
          required: true,
        },
        {
          id: "case_erp_purchasedetail_F_AfterTaxAmount",
          prop: "f_AfterTaxAmount",
          label: "税后金额",
          minWidth: 80,
          align: "center",
          required: true,
        },
        {
          id: "case_erp_purchasedetail_F_DeliveryDate",
          prop: "f_DeliveryDate",
          label: "交付日期",
          minWidth: 156,
        },
      ],
      case_erp_purchasedetail_data: [],
      fileCount: 0,

      id: "",
    };
  },
  computed: {
    case_erp_purchase_f_PayTypeOptions() {
      this.lr_loadDataItem("PurchaseType");
      return this.lr_dataItemOptions(this.lr_dataItem["PurchaseType"]);
    },
    case_erp_purchase_f_SupplierNameOptions() {
      const data = this.lr_DataSource("ERP_Suppliers");
      return this.lr_DataSourceOptions(data, "f_id", "f_name");
    },
    case_erp_purchase_f_RelatedProjectOptions() {
      this.lr_loadDataItem("140");
      return this.lr_dataItemOptions(this.lr_dataItem["140"]);
    },
  },
  methods: {
    fileLoad({ list }) {
      this.fileCount = list.length;
    },

    wfRefresh(){
      this.$emit('refresh')
    },

    // 重置表单
    resetForm() {
      this.formData = {
        case_erp_purchase_f_Number: "", // 采购单号
        case_erp_purchase_f_IsSysNum: 0, //
        case_erp_purchase_f_ApplyId: "", // 关联申请单
        case_erp_purchase_f_IsRelated: 0, //
        case_erp_purchase_f_Theme: "", // 订单主题
        case_erp_purchase_f_PurchaseDate: "", // 采购日期
        case_erp_purchase_f_SupplierName: "", // 供应商名称
        case_erp_purchase_f_SupplierPerson: "", // 联系人
        case_erp_purchase_f_SupplierWay: "", // 联系方式
        case_erp_purchase_f_PurchaseDep: "", // 采购部门
        case_erp_purchase_f_PurchasePerson: "", // 采购人员
        case_erp_purchase_f_PurchasePhone: "", // 联系电话
        case_erp_purchase_f_RelatedProject: "", // 关联项目
        case_erp_purchase_f_PayType: "", // 结算方式
        case_erp_purchase_f_PayAddress: "", // 支付地址
        case_erp_purchase_f_Description: "", // 备注
        case_erp_purchase_f_File: "", // 附件

        case_erp_purchase_f_CreateDate: "",
        case_erp_purchase_f_ModifyDate: "",
      };
      this.activeName = "tab0";
      this.case_erp_purchasedetail_data = [];
      this.fileCount = 0;
      this.id = "";
    },
    // 设置表单数据
    setForm(data) {
      this.$setFormData(
        this.formData,
        data.caseErpPurchaseEntity,
        "case_erp_purchase"
      );
      this.case_erp_purchasedetail_data = data.caseErpPurchasedetailList;

      this.formData.case_erp_purchase_f_CreateDate = this.$formatDate(
        this.formData.case_erp_purchase_f_CreateDate,
        "yyyy-MM-dd"
      );
      this.formData.case_erp_purchase_f_ModifyDate = this.$formatDate(
        this.formData.case_erp_purchase_f_ModifyDate,
        "yyyy-MM-dd"
      );
      this.formData.case_erp_purchase_f_PurchaseDate = this.$formatDate(
        this.formData.case_erp_purchase_f_PurchaseDate,
        "yyyy-MM-dd"
      );
    },
    async loadFormData({ keyValue }) {
     
      const data = await this.$awaitWraper(api.get(keyValue));
      if (data) {
        this.setForm(data);
        this.id = keyValue;
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>